import React, { memo, useEffect, useState } from "react";
import { View, Button } from "@tarojs/components";
import { Popup } from '@antmjs/vantui'
import Taro from '@tarojs/taro';
import { QRCode } from 'taro3-code'

import './index.scss'

const InviteQrCode = (props) => {
  const { show = false } = props
  const [loading, setLoading] = useState(false)
  useEffect(() => {
    if (show) {
      setLoading(true)
      Taro.showToast({
        icon: 'loading',
        title: '加载中',
        duration: 1000
      })
    } else {
      setLoading(false)
    }


  }, [show])
  return (
    <Popup show={show} position='bottom' round closeable onClose={() => props.close()}>
      <View className='qrpopup-center'>
        <View className='text1 black'>面对面扫码</View>
        <View className='qrcode-body'>
          {
            loading ?
              <QRCode
                text={props?.inviteUrl}
                size={160}
                scale={10}
                errorCorrectLevel='M'
                typeNumber={2}
                margin={12}
              ></QRCode>
              :
              null
          }
        </View>
        <View className='invite-url text5 black5'>{
          props?.inviteUrl
        }</View>
        <Button className='copy-button' onClick={() => Taro.setClipboardData({ data: props?.inviteUrl })}>复制邀请链接</Button>
      </View>



    </Popup>
  );
};

export default memo(InviteQrCode);
